<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传智健康后台管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/css/login.css">
</head>

<body>
    <div id="app">
        <div id="navigator">
            <h1>传智健康后台管理系统</h1>
            <div class="navigator-links" style="margin-right: 50px">
                <a id="mainPage" style="color: white;font-family: 'Adobe 黑体 Std R'" href="">主页</a>
                <a id="aboutUs" style="color: white;font-family: 'Adobe 黑体 Std R'" href="">关于我们</a>
            </div>
        </div>
        <div id="login-page">
            <!--<div id="login-box">-->
              <form id="login-box" name="loginForm" action="/login" method="post">
                <div class="flex-row">
                    <!-- <div class="label-icon"></div> -->
                    <span class="login-title">用户登录</span>
                </div>
                <div class="flex-row">
                    <div class="label-icon icon-user"></div>
                    <input type="text" name="username" placeholder="用户名" v-model="username" />
                </div>
                <div class="flex-row">
                    <div class="label-icon icon-pass"></div>
                    <input :type="showPassword ? 'text' : 'password'" name="password" placeholder="密码" v-model="password" />
                    <button v-show="password!==''" :class="['toggle-password-button', { 'toggle-password-button--hide': showPassword }]" @click="togglePassword" type="button" :title="showPassword ? '隐藏密码' : '显示密码'"></button>
                </div>
                <div class="flex-row">
                    <div class="label-icon icon-role"></div>
                    <select id="" v-model="role" name="role">
                        <option value="Manager">管理员</option>
                        <option value="User">用户</option>
                    </select>
                </div>
                <div class="flex-row">
                    <button id="login-button" type="submit">登录</button>
                </div>
                <div class="flex-row login-links">
                    <a href="">找回密码</a>
                </div>
            <!--</div>-->
              </form>
        </div>
        <div id="webfooter">
            <span class="" style="font-family: 'Adobe 黑体 Std R'">Copyright 2020-2021</span>
            <span class="webfooter-icp" style="font-family: 'Adobe 黑体 Std R'"  onclick="location.href='http://beian.miit.gov.cn/'">桂ICP备2021009471号</span>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                username: "",
                password: "",
                role: "Manager",
                showPassword: false,
            },
            methods: {
                login() {
                    console.log(this.username, this.password, this.role);
                    
                },
                togglePassword() {
                    this.showPassword = !this.showPassword;
                }
            }
        })
    </script>
</body>

</html>